<template>
  <div class="citylist">
    <ul>
      <li
        v-for="item in cityList"
        :key="item.id"
        @click="currentCity(item.name)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CityList",
  data() {
    return {
      cityList: [],
    };
  },
  methods: {
    currentCity(cityName) {
      this.$router.push("/?cityName=" + cityName);
    },
  },
  mounted() {
    //获取数据 城市列表
    axios
      .get("/mock/city.json")
      .then((res) => {
        this.cityList = res.data.data.hotCities;
        console.log(this.cityList);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
</style>